<template>
  
  <div class="container" @click="submitForm">
      <div class="clock">{{isture}}</div>
      <div class="nowtime">{{newTime}}</div>
      <div class="dotted"></div>
      <div class="pulse1"></div>
      <div class="pulse2"></div>
      <div class="pulse3"></div>
  </div>
</template>

<script>
 import { listClock, getClock, delClock, addClock, updateClock ,getClockState} from "@/api/system/clock";
 import { getUserProfile } from "@/api/system/user";
import { get } from "http";
export default {
  data() {
     return {
      newTime: "",
      user: {},
      queryParams: {
          clockDatetime: null,
          clockState: null,
          clockIllustrate: null,
          userId: null
        }
        //info:[{"id":"123","code":"Y002","name":"芝士饼干","channel":"网银","description":"网银","enable":1,"order":2}]
  }
},

computed : {
    isture : function(){
      //return this.info[0]['enable']==0 ? "签到":"签退";
      return this.queryParams.clockState==0 ? "签到":"签退";
    }
  },
mounted(){
      this.getNowTime();//进入页面调用该方法获取当前时间
      clearInterval(myTimeDisplay );//销毁之前定时器
      var myTimeDisplay = setInterval(() => {
         this.getNowTime(); //每秒更新一次时间
      }, 1000);
      /*未做完！！！ */
      //this.getState();    
},
created() {
  //this.getUser();
  this.getState();    
},
methods: {
  /**获取状态的请求 */
getState(){
  let nowDate = new Date();
  let date = {
        year: nowDate.getFullYear(),
        month: nowDate.getMonth() + 1,
        date: nowDate.getDate(),
  }
  //当前年月日
  let systemDate = date.year + '-' + date.month + '-' + date.date;
  //获取当前userId
  getUserProfile().then(response => {
        this.user = response.data;
        this.queryParams.userId = this.user.userId;
          //需要传俩参数一个是用户id 一个是当前时间（年月日就行）
        getClockState(this.queryParams.userId,systemDate).then(response =>{
        this.queryParams.clockState = response.data;
        console.log(this.queryParams.clockState);
      }); 
    });
},
 /**获取用户id的请求 弃用！！！*/
  getUser() {
      getUserProfile().then(response => {
        this.user = response.data;
        this.queryParams.userId = this.user.userId;
        // console.log(this.queryParams.userId);
        // console.log(this);
      });
      console.log(this.queryParams.userId);
    },

   // 取消按钮
   init() {
       console.log("222");
      },  
      getNowTime() {
          var date = new Date();
          var time = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ' ' + date.getHours() + ':' + date.getMinutes() + ':' + date.getSeconds();
          this.newTime = time;
      },
     //根据自己的需求，看要不要在时间不大于10的时候在前面补0，如果需要直接this.addZero(date.getMinutes()),其它与之相同，如果不需要删掉addZero（）方法即可。
     //小于10的拼接上0字符串
      addZero(s) {
          return s < 10 ? ('0' + s) : s;
      },
      // ClockHandler(){
          
      // },
      /*提交数据 */      
      submitForm() {
        // this.queryParams.clockDatetime;
        //console.log(this.queryParams);
        this.getNowTime();
        this.queryParams.clockDatetime = this.newTime;
        //this.queryParams.clockState = 1;
        addClock(this.queryParams).then(response => {
                this.$modal.msgSuccess("新增成功");
              });
      window.location.reload();
      }
      
  },
}
</script>

<style>
.container {
  width: 200px;
  height: 200px;
  /* background-color: rgb(168, 203, 240); */
  background: radial-gradient(circle, rgba(247,150,192,1) 0%, rgba(118,174,241,1) 100%);
  margin: 100px auto;
  border-radius: 50%;
  cursor: pointer;
  /* box-shadow:
 -1px -1px 20px 0px rgba(255,255,255,1),
 -4px -4px 5px 0px rgba(255,255,255,1),
 7px 7px 20px 0px rgba(0,0,0,.4),
 4px 4px 5px 0px rgba(0,0,0,.3); */
 box-shadow:rgb(191, 160, 243) 0px 0px 10px;
 position: relative;
}

.container::before,
.container::after {
  position: absolute;
  content: "";
  right: 0;
  top: 0;
  background: rgba(2,126,251,1);
  transition: all 0.3s ease;
}
.container::before{
  right: 0;
  top: 0;
  transition: all 500ms ease;
}
.container::after{
  right: 0;
  top: 0;
  transition: all 500ms ease;
}


.clock {
  text-align: center;
  line-height: 140px;
  font-size: 28px;
  color: #fff;
}
.nowtime {
  color: #fff;
  margin-left:30px ;
  margin-top: -30px;
}

.dotted {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      margin:-30px 0 0 98px;
}


    /* 标签选择器之属性匹配选择 */
    .container div[class^="pulse"] {
      /* 保证小盒子水平垂直居中 */
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      width: 8px;
      height: 8px;
      box-shadow: 0 0 12px rgb(159, 123, 252);
      border-radius: 50%;
      animation: pulse 3s linear infinite;
    }

    .city .pulse1 {
      animation-delay: 0s !important;
    }

    .city .pulse2 {
      animation-delay: 0.5s !important;
    }

    .city .pulse3 {
      animation-delay: 1s !important;
    }

    @keyframes pulse {
      0% {
        width: 200px;
        height: 200px;
      }
      40% {
        width: 200px;
        height: 200px;
        opacity: 1;
      }
      100% {
        width: 200px;
        height: 200px;
        opacity: 0;
      }
    }
</style>